switch: Style switches with pure CSS

Drop hardcoded assets, have a handle actor instead, change its align to
move it.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2717>

diff --git a/data/gnome-shell-theme.gresource.xml b/data/gnome-shell-theme.gresource.xml
index b23b960e93623956bbabf2e03b5dd14e1a467cf4..db1f4e91d11f74cd428c69c71413f7462a2697da 100644 (file)
--- a/data/gnome-shell-theme.gresource.xml
+++ b/data/gnome-shell-theme.gresource.xml
@@ -10,10 +10,6 @@
     <file>pad-osd.css</file>
     <file>process-working-light.svg</file>
     <file>process-working-dark.svg</file>
-    <file>toggle-off.svg</file>
-    <file>toggle-off-light.svg</file>
-    <file>toggle-on.svg</file>
-    <file>toggle-on-light.svg</file>
     <file>workspace-placeholder.svg</file>
   </gresource>
 </gresources>

diff --git a/data/theme/gnome-shell-sass/widgets/_switches.scss b/data/theme/gnome-shell-sass/widgets/_switches.scss
index ef8a7b636841329f7968f678a6b7c254f448ec75..31e4de05ab439150b6df4c0dd1be17200d8ecdff 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_switches.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switches.scss
@@ -1,18 +1,40 @@
 /* Switches */
 
-// these are equal to the size of the SVG assets
-$switch_height: 26px;
 $switch_width: 46px;
+$switch_handle_size: 20px;
 
 .toggle-switch {
-  color: $fg_color;
-  height: $switch_height;
   width: $switch_width;
-  background-size: contain;
-  background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-off-light.svg"),url("resource:///org/gnome/shell/theme/toggle-off.svg"));
-  &:checked {
-    background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/toggle-on-light.svg"),url("resource:///org/gnome/shell/theme/toggle-on.svg"));
+  border-radius: $forced_circular_radius;
+  transition-duration: 100ms;
+  color: $fg_color;
+
+  @if $contrast == 'high' {
+    background: transparentize(if($variant == 'light', black, white), .7);
+  } @else {
+    background: transparentize(if($variant == 'light', black, white), .85);
+  }
+
+  StIcon {
+    icon-size: $base_icon_size;
   }
 
-  & StIcon {icon-size: $base_icon_size;}
+  .handle {
+    margin: 3px;
+    width: $switch_handle_size;
+    height: $switch_handle_size;
+    border-radius: $forced_circular_radius;
+    background: if($variant == 'light', white, mix(white, $bg_color, 80%));
+    box-shadow: 0 2px 4px transparentize(black, .8);
+    transition-duration: 100ms;
+  }
+
+  &:checked {
+    background: $selected_bg_color;
+    color: $selected_fg_color;
+
+    .handle {
+      background: white;
+    }
+  }
 }

diff --git a/data/theme/toggle-off-light.svg b/data/theme/toggle-off-light.svg
deleted file mode 100644 (file)
index aa2385b..0000000
--- a/data/theme/toggle-off-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#c0bfbc;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>
\ No newline at end of file

diff --git a/data/theme/toggle-off.svg b/data/theme/toggle-off.svg
deleted file mode 100644 (file)
index 43cb59f..0000000
--- a/data/theme/toggle-off.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="matrix(-1 0 0 1 0 -291.18)"><rect width="46" height="26" x="-46" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#fff;fill-opacity:.15;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="-23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;fill-opacity:1;stroke:none;stroke-width:1;marker:none"/></g></svg>
\ No newline at end of file

diff --git a/data/theme/toggle-on-light.svg b/data/theme/toggle-on-light.svg
deleted file mode 100644 (file)
index 778f922..0000000
--- a/data/theme/toggle-on-light.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="stroke:none;stroke-width:1;marker:none"/></g></svg>
\ No newline at end of file

diff --git a/data/theme/toggle-on.svg b/data/theme/toggle-on.svg
deleted file mode 100644 (file)
index 43c221e..0000000
--- a/data/theme/toggle-on.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="46" height="26"><g transform="translate(0 -291.18)"><rect width="46" height="26" y="291.18" fill="#3081e3" rx="12.458" ry="13" style="fill:#3584e4;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="295.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#000;fill-opacity:.2;stroke:none;stroke-width:1;marker:none"/><rect width="20" height="20" x="23" y="294.18" fill="#f8f7f7" rx="10" ry="10" style="fill:#fff;stroke:none;stroke-width:1;marker:none"/></g></svg>
\ No newline at end of file

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 84455ddc0c3d94d3624a217db7831d0fe11809d6..a37484bbdaf228bf34da6e7578e6c137123bf1fe 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -336,22 +336,25 @@ export const Switch = GObject.registerClass({
             GObject.ParamFlags.READWRITE,
             false),
     },
-}, class Switch extends St.Bin {
+}, class Switch extends St.Widget {
     _init(state) {
         this._state = false;
 
-        const box = new St.BoxLayout({
-            x_expand: true,
-            y_expand: true,
-        });
-
         super._init({
             style_class: 'toggle-switch',
-            child: box,
             accessible_role: Atk.Role.CHECK_BOX,
-            state,
         });
 
+        const box = new St.BoxLayout({
+            x_expand: true,
+            y_expand: true,
+            constraints: new Clutter.BindConstraint({
+                source: this,
+                coordinate: Clutter.BindCoordinate.SIZE,
+            }),
+        });
+        this.add_child(box);
+
         this._onIcon = new St.Icon({
             icon_name: 'switch-on-symbolic',
             x_expand: true,
@@ -368,6 +371,20 @@ export const Switch = GObject.registerClass({
         });
         box.add_child(this._offIcon);
 
+        this._handle = new St.Widget({
+            style_class: 'handle',
+            y_align: Clutter.ActorAlign.CENTER,
+            x_align: Clutter.ActorAlign.START,
+            x_expand: true,
+            constraints: new Clutter.BindConstraint({
+                source: this,
+                coordinate: Clutter.BindCoordinate.SIZE,
+            }),
+        });
+        this.add_child(this._handle);
+
+        this.state = state;
+
         this._a11ySettings = new Gio.Settings({
             schema_id: 'org.gnome.desktop.a11y.interface',
         });
@@ -375,8 +392,6 @@ export const Switch = GObject.registerClass({
         this._a11ySettings.connectObject('changed::show-status-shapes',
             () => this._updateIconOpacity(),
             this);
-        this.connect('notify::state',
-            () => this._updateIconOpacity());
         this._updateIconOpacity();
     }
 
@@ -384,10 +399,8 @@ export const Switch = GObject.registerClass({
         const activeOpacity = this._a11ySettings.get_boolean('show-status-shapes')
             ? 255. : 0.;
 
-        this._onIcon.opacity = this.state
-            ? activeOpacity : 0.;
-        this._offIcon.opacity = this.state
-            ? 0. : activeOpacity;
+        this._onIcon.opacity = activeOpacity;
+        this._offIcon.opacity = activeOpacity;
     }
 
     get state() {
@@ -398,10 +411,13 @@ export const Switch = GObject.registerClass({
         if (this._state === state)
             return;
 
-        if (state)
+        if (state) {
             this.add_style_pseudo_class('checked');
-        else
+            this._handle.x_align = Clutter.ActorAlign.END;
+        } else {
             this.remove_style_pseudo_class('checked');
+            this._handle.x_align = Clutter.ActorAlign.START;
+        }
 
         this._state = state;
         this.notify('state');